<div class="modal" ng-controller="FlowableUserPopupCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">&times;</button>
        <h2 translate>PROPERTY.ASSIGNMENT.TITLE</h2>
      </div>
      <div class="modal-body">
        <div class="detail-group clearfix">

          <div class="form-group clearfix">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS' | translate}}</label>
              </div>
              <div class="col-xs-8 clearfix">
                <ul class="simple-list"
                    ng-show="popup.assignmentObject.candidateUsers.length || popup.assignmentObject.candidateUserFields.length">
                  <li ng-repeat="user in popup.assignmentObject.candidateUsers">
                    <i class="icon icon-user"></i>
                    <span user-name="user"></span>

                    <div class="actions">
                      <a ng-click="removeCandidateUser(user)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                  <li ng-repeat="userField in popup.assignmentObject.candidateUserFields">
                    <i class="icon icon-user"></i>
                    <span>{{userField.name}}</span>
                    <span class="field-type"> - {{userFieldField.id}}</span>

                    <div class="actions">
                      <a ng-click="removeCandidateUserField(userField)"><i class="icon icon-remove"></i></a>
                    </div>
                  </li>
                </ul>
                <div class="no-results"
                     ng-if="(!popup.assignmentObject.candidateUsers || !popup.assignmentObject.candidateUsers.length) && (!popup.assignmentObject.candidateUserFields || !popup.assignmentObject.candidateUserFields.length)">
                  {{'PROPERTY.ASSIGNMENT.IDM.NO_CANDIDATE_USERS' | translate}}
                </div>
              </div>
            </div>
          </div>

          <div class="form-group clearfix">
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label>{{'PROPERTY.ASSIGNMENT.SEARCH' | translate}}</label>
              </div>
              <div class="col-xs-8">
                <input class="form-control" type="text" id="people-select-input"
                       placeholder="{{'PROPERTY.ASSIGNMENT.PLACEHOLDER-SEARCHUSER' | translate}}" auto-focus custom-keys
                       up-pressed="previousUser()" down-pressed="nextUser()" enter-pressed="confirmUser()"
                       delayed-model="popup.filter" delay="200"/>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="subtle" style="margin: 2px 0 2px 0">
                  <span translate="PROPERTY.ASSIGNMENT.MATCHING"></span>
                </div>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="col-xs-4">
                <label></label>
              </div>
              <div class="col-xs-8">
                <div class="inline-people-select">
                  <ul class="simple-list">
                    <li ng-click="confirmUser(user)" ng-repeat="user in popup.userResults"
                        ng-class="{'active': $index == popup.selectedIndex}">
                      <div user-picture="user" user-index="$index" user-name="user"></div>
                    </li>
                  </ul>
                  <div class="nothing-to-see" translate="GENERAL.MESSAGE.PEOPLE-NO-MATCHING-RESULTS"
                       ng-show="popup.userResults.length == 0"></div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>
        <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button>
      </div>
    </div>
  </div>
